<template>
  <section class="clock">
      <span>{{date}}</span>
      <span>{{time}}</span>
      <span>{{week}}</span>
  </section>
</template>

<script>
const week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const zeroPadding = (num, digit) => {
    let zero = '';
    for(let i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
};
export default {
  name: "Clock",
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
      return {
          time: '',
          date: '',
          week: '',
          timerID: null
      };
  },
  mounted() {
      this.updateTime();
      this.timerID = setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.time = zeroPadding(now.getHours(), 2) + ':' + zeroPadding(now.getMinutes(), 2) + ':' + zeroPadding(now.getSeconds(), 2);
      this.date = zeroPadding(now.getFullYear(), 4) + '/' + zeroPadding(now.getMonth()+1, 2) + '/' + zeroPadding(now.getDate(), 2);
      this.week = week[now.getDay()];
    },
  },
  beforeDestroy() {
      if(this.timerID) {
          window.clearInterval(this.timerID);
          this.timerID = null;
      }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .clock{
    position: absolute;
    right: 192px;
    top: 74px;
    font-size: 42px;
    color: #9CA7C7;
    // font-family: PangMenZhengDao;
    &>span{
      margin-right: 66px;
      &:nth-last-of-type(1){
        margin-right: 0;
      }
    }
  }
</style>
